'use client'

import { Box, IconButton, Toolbar, Typography } from '@mui/material'
import MuiAppBar, {
	type AppBarProps as MuiAppBarProps
} from '@mui/material/AppBar'
import MuiDrawer from '@mui/material/Drawer'
import {
	type CSSObject,
	type Theme,
	styled,
	useTheme
} from '@mui/material/styles'
import { ChevronLeft, ChevronRight, Menu } from 'lucide-react'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'

import SidebarMenu from '@/components/SidebarMenu'

import { SITE_NAME } from '@/constants/seo.constants'

const drawerWidth = 240

const openedMixin = (theme: Theme): CSSObject => ({
	width: drawerWidth,
	transition: theme.transitions.create('width', {
		easing: theme.transitions.easing.sharp,
		duration: theme.transitions.duration.enteringScreen
	}),
	overflowX: 'hidden'
})

const closedMixin = (theme: Theme): CSSObject => ({
	transition: theme.transitions.create('width', {
		easing: theme.transitions.easing.sharp,
		duration: theme.transitions.duration.leavingScreen
	}),
	overflowX: 'hidden',
	width: `calc(${theme.spacing(7)} + 1px)`,
	[theme.breakpoints.up('sm')]: {
		width: `calc(${theme.spacing(8)} + 1px)`
	}
})

const DrawerHeader = styled('div')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'flex-end',
	padding: theme.spacing(0, 1),
	// necessary for content to be below app bar
	...theme.mixins.toolbar
}))

interface AppBarProps extends MuiAppBarProps {
	open?: boolean
}

const AppBar = styled(MuiAppBar, {
	shouldForwardProp: prop => prop !== 'open'
})<AppBarProps>(({ theme, open }) => ({
	zIndex: theme.zIndex.drawer + 1,
	transition: theme.transitions.create(['width', 'margin'], {
		easing: theme.transitions.easing.sharp,
		duration: theme.transitions.duration.leavingScreen
	}),
	...(open && {
		marginLeft: drawerWidth,
		width: `calc(100% - ${drawerWidth}px)`,
		transition: theme.transitions.create(['width', 'margin'], {
			easing: theme.transitions.easing.sharp,
			duration: theme.transitions.duration.enteringScreen
		})
	})
}))

const Drawer = styled(MuiDrawer, {
	shouldForwardProp: prop => prop !== 'open'
})(({ theme, open }) => ({
	width: drawerWidth,
	flexShrink: 0,
	whiteSpace: 'nowrap',
	boxSizing: 'border-box',
	...(open && {
		...openedMixin(theme),
		'& .MuiDrawer-paper': openedMixin(theme)
	}),
	...(!open && {
		...closedMixin(theme),
		'& .MuiDrawer-paper': closedMixin(theme)
	})
}))

export function HeaderSidebar() {
	const theme = useTheme()
	const [open, setOpen] = useState(false)
	const pathname = usePathname()

	const handleDrawerOpen = () => {
		setOpen(true)
	}

	const handleDrawerClose = () => {
		setOpen(false)
	}

	useEffect(() => {
		if (open) {
			handleDrawerClose()
		}
	}, [pathname])

	return (
		<>
			<AppBar
				position='fixed'
				open={open}
			>
				<Toolbar>
					<IconButton
						color='inherit'
						aria-label='open drawer'
						onClick={handleDrawerOpen}
						edge='start'
						sx={{
							marginRight: 5,
							...(open && { display: 'none' })
						}}
					>
						<Menu />
					</IconButton>
					<Typography
						variant='h6'
						noWrap
						component='div'
					>
						{SITE_NAME}
					</Typography>
				</Toolbar>
			</AppBar>
			{open && (
				<Box
					sx={{
						position: 'fixed',
						width: '100%',
						height: '100%',
						zIndex: theme.zIndex.drawer - 1,
						backdropFilter: 'blur(1.5px)'
					}}
					onClick={handleDrawerClose}
				/>
			)}
			<Drawer
				variant='permanent'
				open={open}
			>
				<DrawerHeader>
					<IconButton onClick={handleDrawerClose}>
						{theme.direction === 'rtl' ? <ChevronRight /> : <ChevronLeft />}
					</IconButton>
				</DrawerHeader>
				<SidebarMenu open={open} />
			</Drawer>
		</>
	)
}
